<template>
  <view class="about">
    <!-- <image class="logo" src="../../WX20220811-173832@2x.png" mode=""></image> -->
    <view class="card">
      <view @click="toPath('/bundle/pages/web/web?title=service')">
        <text>软件使用许可协议</text>
        <image
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844611732717437.png"
        />
      </view>
      <view @click="toPath('/bundle/pages/web/web?title=privacy')">
        <text>隐私政策</text
        ><image
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844611732717437.png"
        />
      </view>
      <view @click="toPath(2)"> <text>当前版本</text>1.0.0 </view>
      <view @click="call"> <text>客服电话</text>{{ mobile }} </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mobile: "",
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    init() {
      // 获取客服信息 api/user/customerService
      this.$http.post("api/user/customerService").then((res) => {
        let { mobile } = res;
        this.mobile = mobile;
      });
    },
    toPath(url) {
      if (url) {
        uni.navigateTo({
          url,
        });
      }
    },
    call() {
      if (!this.mobile) {
        return;
      }
      uni.showModal({
        title: "提示",
        content: "是否确认拨打客服电话？",
        complete: (res) => {
          let { confirm } = res;
          if (confirm) {
            uni.makePhoneCall({
              phoneNumber: this.mobile,
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.about {
  padding: 87rpx 30rpx 30rpx;
  .logo {
    width: 150rpx;
    height: 150rpx;
    margin: 0 auto 53rpx;
  }
  .card {
    background-color: white;
    border-radius: 28rpx;
    padding: 0 30rpx;
    view {
      height: 100rpx;
      border-bottom: 2rpx solid rgba(245, 245, 245, 1);
      display: flex;
      align-items: center;
      color: #333333;
      font-size: 30rpx;
      text {
        flex: 1;
      }
      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>
